<template>
  <blockquote :style="borderColor">
    <div v-if="title" class="title">
      {{ title }}
    </div>
    <slot />
  </blockquote>
</template>

<script>
export default {
  name: 'Block',
  props: {
    types: {
      type: String,
      default: '#98cbff'
    },
    title: {
      type: String,
      default: ''
    }
  },
  computed: {
    borderColor() {
      const color = this.types
      return {
        borderLeft: `5px solid ${color}`
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  blockquote {
    position: relative;
    margin: 10px 0;
    padding: 15px 16px;
    border: 1px solid #DCDFE6;
    border-right: none;
    border-radius: 0 2px 2px 0;
    .title {
      position: absolute;
      top: -10px;
      left: 5px;
      background-color: #FFF;
      padding: 0 20px;
      font-weight: 500;
      color: #303133;
      font-size: 15px;
    }
  }
</style>
